{extend name="layout" /}
{block name="css"}
<!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
<link rel="stylesheet" href="/static/Extra/css/coring.css">
<!-- ================== END PAGE LEVEL STYLE ================== -->
{/block}
{block name="content"}
<div class="content">
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li><a href="{:url('admin/Index/index')}">首页</a></li>
        <li><a href="javascript:;">实时监测</a></li>
        <li class="active"></li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">实时监测
        <small>动态监测回路信息</small>
    </h1>
    <!-- end page-header -->
    <div class="col-md-12">
        <!-- begin panel -->
        <div class="panel panel-inverse panel-with-tabs" data-sortable-id="ui-unlimited-tabs-1">
            <div class="panel-heading p-0">
                <div class="panel-heading-btn m-r-10 m-t-10">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-expand"><i
                            class="fa fa-expand"></i></a>
                </div>
                <!-- begin nav-tabs -->
                <div class="tab-overflow">
                    <ul class="nav nav-tabs nav-tabs-inverse">
                        <li class="prev-button"><a href="javascript:;" data-click="prev-tab" class="text-success"><i
                                class="fa fa-arrow-left"></i></a></li>
                        <li class="active"><a href="#nav-tab-1" data-toggle="tab">01电气室</a></li>
                        <li class=""><a href="#nav-tab-2" data-toggle="tab">02电气室</a></li>
                        <li class=""><a href="#nav-tab-3" data-toggle="tab">03电气室</a></li>
                        <li class=""><a href="#nav-tab-4" data-toggle="tab">04电气室</a></li>
                        <li class="next-button"><a href="javascript:;" data-click="next-tab" class="text-success"><i
                                class="fa fa-arrow-right"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane fade active in" id="nav-tab-1">
                    <!-- <div id="main" style="width: 100%;height:400px;"></div> -->
                    <div id="allmap"></div>
                    <h3 class="m-t-10"></h3>
                </div>
                <div class="tab-pane fade" id="nav-tab-2">
                    <div id="allmap"></div>
                    <h3 class="m-t-10">Nav Tab 2</h3>
                    <p>
                    </p>
                    <p>
                    </p>
                </div>
                <div class="tab-pane fade" id="nav-tab-3">
                    <h3 class="m-t-10">Nav Tab 3</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Integer ac dui eu felis hendrerit lobortis. Phasellus elementum, nibh eget adipiscing porttitor,
                        est diam sagittis orci, a ornare nisi quam elementum tortor.
                        Proin interdum ante porta est convallis dapibus dictum in nibh.
                        Aenean quis massa congue metus mollis fermentum eget et tellus.
                        Aenean tincidunt, mauris ut dignissim lacinia, nisi urna consectetur sapien,
                        nec eleifend orci eros id lectus.
                    </p>
                    <p>
                        Aenean eget odio eu justo mollis consectetur non quis enim.
                        Vivamus interdum quam tortor, et sollicitudin quam pulvinar sit amet.
                        Donec facilisis auctor lorem, quis mollis metus dapibus nec. Donec interdum tellus vel mauris
                        vehicula,
                        at ultrices ex gravida. Maecenas at elit tincidunt, vulputate augue vitae, vulputate neque.
                        Aenean vel quam ligula. Etiam faucibus aliquam odio eget condimentum.
                        Cras lobortis, orci nec eleifend ultrices, orci elit pellentesque ex, eu sodales felis urna nec
                        erat.
                        Fusce lacus est, congue quis nisi quis, sodales volutpat lorem.
                    </p>
                </div>
            </div>

        </div>
    </div>

    <div class="col-md-12">
        <div class="panel panel-inverse panel-with-tabs" data-sortable-id="ui-unlimited-tabs-1">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default"
                       data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success"
                       data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                       data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                       data-click="panel-remove"><i class="fa fa-times"></i></a>
                </div>
                <h4 class="panel-title">实时电气室回路监测信息</h4>
            </div>
            <div class="alert alert-info fade in">
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
                当前电气室所有回路详情。电流温度颜色变红即为报警状态！！3s刷新一次，或者点击手动刷新。
            </div>
            <button onclick="alltimedata(this)" class="btn btn-primary">点击刷新</button>
            <div class="realtime-box" id="realtime-box">

            </div>
        </div>
    </div>


</div>

{/block}
{block name="script"}
<script src="/static/Extra/js/echarts.min.js"></script>

<script>
    $(document).ready(function () {
//        渲染实时监测div
        $(function () {
            // 定时刷新
            setTimeout(function () {
                    alltimedata();
                },
                200);//setTimeout 程序执行后200毫秒执行push，但是仅此一次。
            setInterval(function () {
                    alltimedata();
                },
                5000);
            // 利用ajax动态加载实时监测信息，实现定时及页面局部刷新
            function alltimedata() {
                $.ajax({
                    url: '/admin/coring/getdata',
                    data: {},
                    type: 'get',
                    async: true,
                    datatype: 'json',
                    success: function (data) {
                        var finalarr = eval("(" + data + ")");
                        var html = "";
                        $(".realtime-box").html(html);
                        for (var i = 0; i < finalarr.length; i++) {
                            //填充属性
                            var loop_name = finalarr[i].loop_name;
                            var smoke_status;
                            if(finalarr[i].smoke) {
                                smoke_status = '气体异常';
                            }else {
                                smoke_status = '正常';
                            }
                            var fire_status;
                            if(finalarr[i].fire) {
                                fire_status = '存在明火';
                            }else{
                                fire_status = '正常';
                            }
                            var near_infrared_status;
                            if(finalarr[i].near) {
                                near_infrared_status = '图像异常';
                            }else {
                                near_infrared_status = '正常';
                            }
                            var status = function (status) {
                                switch (status) {
                                    case 0:
                                        return {'statusClass': 'tag-error', 'status': '离线'};
                                    case 1:
                                        return {'statusClass': 'tag-default', 'status': '在线'};
                                    case 2:
                                        return {'statusClass': 'tag-warning', 'status': '报警'};
                                }
                            };
                            var resi_current = finalarr[i].resi_current;
                            var cable_temp = finalarr[i].cable_temp;
                            var location = finalarr[i].location;
                            //填充模板
                            html += "<div class='realtime-item'>"
                                + "<div class=\"monitor-tag " + status(finalarr[i].status).statusClass + "\"></div>"
                                + "<div class='monitor-body'>"
                                + "<h4>" + loop_name + "</h4>"
                                + "<div>"
                                + "<label>当前状态：</label>"
                                + "<p>" + status(finalarr[i].status).status + "</p><br>"
                                + "<label>安装位置：</label>"
                                + "<p>" + location + "电气室</p><br>"                            
                                + "<label>实时电流：</label>"
                                + "<p>" + resi_current + "mA</p><br>"
                                + "<label>实时温度：</label>"
                                + "<p>" + cable_temp + "℃</p><br>"
                                + "<label >火灾烟雾检测：</label>"
                                + "<p>" + smoke_status + "</p><br>"
                                + "<label>火灾近红外检测：</label>"
                                + "<p>" + near_infrared_status + "</p><br>"
                                + "<label>火灾检测：</label>"
                                + "<p>" + fire_status + "</p><br>"                        
                                + "</div>"
                                + "</div></div>";
                        }
                        $(".realtime-box").html(html)
                    }
                });
            }
        });


//         //图表
//         $(function () {
//             var date = new Date();
//             var data = [
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]},
//                 {value: [Math.random(), Math.random()]}
//             ];
//             var convertData = function (data) {
//                 var res1 = [];
//                 var res2 = [];
//                 for (var i = 0; i < data.length; i++) {
//                     res1.push({
//                         value: data[i].value[0]
//                     });
//                     res2.push({
//                         value: data[i].value[1]
//                     });
//                 }
//                 return [res1, res2];
//             };
//             var historyChart = echarts.init(document.getElementById('main'));
// // 指定图表的配置项和数据
//             var option = {
//                 title: {
//                     text: '历史折线图'
//                 },
//                 tooltip: {
//                     trigger: 'axis'
//                 },
//                 toolbox: {
//                     feature: {
//                         dataZoom: {
//                             yAxisIndex: 'none'
//                         },
//                         magicType: {type: ['line', 'bar']},
//                         restore: {},
//                         saveAsImage: {}
//                     }
//                 },
//                 grid: {
//                     left: '3%',
//                     right: '4%',
// //            bottom: '15%',
//                     containLabel: false
//                 },
//                 legend: {
//                     data: ['剩余电流', '温度']
//                 },
//                 xAxis: {
//                     type: 'category',
//                     boundaryGap: false,
//                     data: (function () {
//                         var now = new Date();
//                         var res = [];
//                         var len = data.length;
//                         while (len--) {
//                             res.unshift(now.getHours() + ':' + now.getMinutes());
//                             now = new Date(now - 60000);
//                         }
//                         return res;
//                     })()
//                 },
//                 yAxis: {
//                     type: 'value'
//                 },
//                 dataZoom: [{
//                     type: 'inside',
//                     start: 0,
//                     end: 100
//                 }, {
//                     start: 0,
//                     end: 10,
//                     handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
//                     handleSize: '80%',
//                     handleStyle: {
//                         color: '#fff',
//                         shadowBlur: 3,
//                         shadowColor: 'rgba(0, 0, 0, 0.6)',
//                         shadowOffsetX: 2,
//                         shadowOffsetY: 2
//                     }
//                 }],
//                 series: [{
//                     name: '剩余电流',
//                     type: 'line',
//                     smooth: true,
//                     symbol: 'none',
//                     data: convertData(data)[0]
//                 }, {
//                     name: '温度',
//                     type: 'line',
//                     smooth: true,
//                     symbol: 'none',
//                     data: convertData(data)[1]
//                 }]
//             };
// // 使用刚指定的配置项和数据显示图表。
//             historyChart.setOption(option);
//             // TableManageTableTools.init();
//         })
    });
</script>
{/block}
